<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title></title>
<style>
div{ font-size:12px;}
a:hover {
	font-size: 9pt;	color: #FF0000;
}
a {
	font-size: 9pt;	text-decoration: none;	color: #3C404D;
}
#box{
  width: 366px;
  height: 391px;
  margin: 5px auto;
}
ul{
  list-style: none;
}
li{
  margin: 10px;
}
li span:first-child{
  margin: 15px;
}
.bottom span:last-child{
  display: block;
  float: right;
  width: 90%;
}
#box div:last-child{
  float: right;
  margin-right: 50px;
}
</style>
</head>

<body onLoad="showPage('add')">
<div id="box">
  <div>
    <div>
      <h3>2018世界杯分组情况</h3>
    </div>
    <ul>
      <li><span id="group1"></span><span id="team1"></span></li>
      <li><span id="group2"></span><span id="team2"></span></li>
    </ul>
  </div>
  <div><a href="#" onClick="showPage('reduce')">上一页</a>&nbsp;<a href="#" onClick="showPage('add')">下一页</a></div>
</div>
<script type="text/javascript">
  var txt='<?xml version="1.0" encoding="utf-8"?>\n' +
          '<grouping>\n' +
          '<groups>\n' +
          '<group>A组</group>\n' +
          '<team>俄罗斯 沙特阿拉伯 埃及 乌拉圭</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>B组</group>\n' +
          '<team>葡萄牙 西班牙 摩洛哥 伊朗</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>C组</group>\n' +
          '<team>法国 澳大利亚 秘鲁 丹麦</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>D组</group>\n' +
          '<team>阿根廷 冰岛 克罗地亚 尼日利亚</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>E组</group>\n' +
          '<team>巴西 瑞士 哥斯达黎加 塞尔维亚</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>F组</group>\n' +
          '<team>德国 墨西哥 瑞典 韩国</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>G组</group>\n' +
          '<team>比利时 巴拿马 突尼斯 英格兰</team>\n' +
          '</groups>\n' +
          '<groups>\n' +
          '<group>H组</group>\n' +
          '<team>波兰 塞内加尔 哥伦比亚 日本</team>\n' +
          '</groups>\n' +
          '</grouping>';
var xmldoc,groupNode,teamNode;			//定义变量
if (window.DOMParser) {
    var parser=new DOMParser();
    xmldoc=parser.parseFromString(txt,"text/xml");
} else {// Internet Explorer
    xmldoc=new ActiveXObject("Microsoft.XMLDOM");
    xmldoc.async=false;
    xmldoc.loadXML(txt);
}
var groups = xmldoc.getElementsByTagName("groups");
var pages = groups.length/2;
var currentPage = 0;
function showPage(action){
	if(action=="add")
    	currentPage++;
    else
      	currentPage--;
    if(currentPage>=pages) currentPage=pages;
    else if(currentPage<=0) currentPage=1;
    var i=currentPage;
    groupNode=groups[i*2-2].getElementsByTagName("group");
    teamNode=groups[i*2-2].getElementsByTagName("team");
    group1.innerHTML=groupNode[0].firstChild.nodeValue;
    team1.innerHTML=teamNode[0].firstChild.nodeValue;
    groupNode=groups[i*2-1].getElementsByTagName("group");
    teamNode=groups[i*2-1].getElementsByTagName("team");
    group2.innerHTML=groupNode[0].firstChild.nodeValue;
    team2.innerHTML=teamNode[0].firstChild.nodeValue;
}
</script>
</body>
</html>
